<template>
	<!-- 试卷笔记详情 -->
	<view class="cs-detl-x">
		<view class="cs-detl" v-if="detailData.unid">
			<view class="cs-detl-tc">
				<input class="tc-input" type="text" v-model="detailData.notes_title" disabled="true"/>
			</view>
			<view class="cs-detl-editor-x">
				<editor id="editor" class="ql-container" read-only="true"  placeholder="开始输入..." showImgSize showImgToolbar showImgResize
				 @ready="onEditorReady">
				</editor>
			</view>
		</view>
		<!-- 无数据时展示 -->
		<v-none none_msg='暂无笔记~' v-else></v-none>
	</view>
</template>
<script>
	import none from './components/none'
	export default {
		components: {
			vNone: none
		},
		data() {
			return {
				data: uni.getStorageSync('courseCont'), //课程相关数据
				detailData: {}, // 笔记详情数据
				courseKey: null, // 课程ID
				editorCtx: null, // 富文本上下文
				formats: {},
				noteText: '', // 内容
				userId: uni.getStorageSync('currentChild').student_id
			}
		},
		onLoad() {
			this.courseKey = this.data.semester_week_id+'-'+this.data.day+'-'+this.data.time_lesson_id;
			var data = {
				usr_id: this.userId,
				course_key: this.courseKey,
				notes_type: 3
			}
			this.$kbapi.apiPost('mobile/notes/infos', data).then(res => {
				var url = '';
				if (res.data.code == 200 && res.data.data.total > 0) {
					this.detailData = res.data.data.list[0];
				} else {
					this.detailData = {};
				}
			})
		},
		methods: {
			// 初始化富文本
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
					// 解析返回过来的富文本并渲染
					this.editorCtx.setContents({
						html: this.detailData.notes_content
					})
				}).exec()
			}
		}
	}
</script>

<style lang="scss">
	page {
		overflow: hidden;
		background: #FAFAFA;
	}
	// 输入标题
	.cs-detl-tc{
		padding: 20upx 30upx;
		background: #FFFFFF;
	}
	.tc-input{
		font-size: 34upx;
		color: #333333;
	}
	
	// 富文本
	.cs-detl-editor-x{
		padding-bottom: 100upx;
	}
	.toolbar{
		display: flex;
		position: fixed;
		bottom: 0;left: 0;right: 0;
		justify-content: space-around;
		z-index: 1;
		text-align: center;
		font-size: 32upx;
		color: #666666;
		box-shadow:0px -2px 4px rgba(0,0,0,0.16);
		background: #FFFFFF;
	}
	.ql-container{
		padding: 0 20upx;
		height: calc(100% - 200upx);
	}
	// 图标
	.icon_caozuo{
		color: #000000;
		font-size: 50upx;
	}
</style>
